<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <main>

  <!--
    <div style="display:flex; flex-direction:row; justify-content:center;">
      <div style="flex-direction: column;">
        <div>Header</div>
        <div>Body</div>
      </div>
    </div>
  -->

    <!--
      <div class="flex flex-row justify-center">
      <div class="flex-col rounded-lg bg-black hover:bg-white w-3/5 ">
        <div class="w-100">Menus Header</div>
        <div class="w-100">Body</div>
      </div>
    </div>
    -->

    <div class="flex flex-col max-w-xl mx-auto place-items-center bg-slate-100"> <!--conainer-->

      <!--headers-->
      <div class="flex size-full justify-between bg-slate-400">  
        <div class="border-solid border border-black bg-slate-600">create</div>
        <div class="border-solid border border-black bg-slate-600">clear</div>
        <div class="outline outline-2">right</div>
        <button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 rounded-xl h-20 w-40">clear confirm</button>
      </div>

      <!--views-->
      <div class="max-w-md h-20"> 
          <div class="line-clamp-2 hover:line-clamp-none break-all">
              input Components Components Components Components Components Components Components 
              Components Components Components Components ComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponentsComponents
          </div>
        <div>result Components</div>
      </div>
        
      <!--footers-->
      <div class="flex flex-row size-full justify-center "> 
        <button class="border">create</button>
      </div>

    </div>

  </main>
</body>
</html>
